<template>
    <div class="sing-page">
        <!-- 检索区域 -->
        <div class="search-area">
            <!-- 条件区域 -->
            <div class="condition-area">
                <div class="condition-area_input">
                    <a-input-search v-model:value="inputSearchValue" placeholder="input search loading with enterButton"
                        enter-button />
                </div>
                <a-space class="condition-area_time clomun-space">
                    <div class="inout-time">
                        <span>入库时间:</span>
                        <a-range-picker v-model:value="entryTime" :bordered="false" />
                    </div>
                    <div class="year-time">
                        <span>制片年份范围:</span>
                        <a-range-picker v-model:value="productYearRange" picker="year" />
                    </div>
                </a-space>
                <div class="condition-area_type clomun-space">
                    <!-- 一级 -->
                    <div>
                        <span>一级类别</span>
                        <a-select v-model:value="province" style="width: 120px"
                            :options="provinceData.map(pro => ({ value: pro }))" placeholder="请选择一级类别" />
                    </div>
                    <!-- 二级 -->
                    <div>
                        <span>二级类别</span>
                        <a-select v-model:value="state.secondCity" style="width: 120px"
                            :options="cities.map(city => ({ value: city }))" placeholder="请选择二级类别" />
                    </div>
                    <!-- 选择阶段 -->
                    <div>
                        <span>选择阶段</span>
                        <a-select ref="select" v-model:value="stageValue" style="width: 120px" @focus="focus"
                            @change="handleChange">
                            <a-select-option value="jack">Jack</a-select-option>
                            <a-select-option value="lucy">Lucy</a-select-option>
                            <a-select-option value="disabled" disabled>Disabled</a-select-option>
                            <a-select-option value="Yiminghe">yiminghe</a-select-option>
                        </a-select>
                    </div>
                </div>
                <a-space class="condition-area_other clomun-space">
                    <div><span>选择国家或地区</span>
                        <a-select ref="select" v-model:value="stageValue" style="width: 120px" @focus="focus"
                            @change="handleChange">
                            <a-select-option value="jack">Jack</a-select-option>
                            <a-select-option value="lucy">Lucy</a-select-option>
                            <a-select-option value="disabled" disabled>Disabled</a-select-option>
                            <a-select-option value="Yiminghe">yiminghe</a-select-option>
                        </a-select>
                    </div>
                    <div>
                        <div><span>完整度</span>
                            <a-select ref="select" v-model:value="stageValue" style="width: 120px" @focus="focus"
                                @change="handleChange">
                                <a-select-option value="jack">Jack</a-select-option>
                                <a-select-option value="lucy">Lucy</a-select-option>
                                <a-select-option value="disabled" disabled>Disabled</a-select-option>
                                <a-select-option value="Yiminghe">yiminghe</a-select-option>
                            </a-select>
                        </div>
                    </div>
                </a-space>
            </div>
            <!-- 按钮 -->
            <div class="button-area">
                <div>
                    <a-button type="primary">修改密码</a-button>
                </div>
                <div>
                    <a-button>退出登录</a-button>
                </div>
            </div>
        </div>
        <div class="data-area">
            <div class="option-area">
                <div class="option-layout">
                    <div>
                        <a-button type="primary" :size="size">
                            <template #icon>
                                <DownloadOutlined />
                            </template>
                            新建项目
                        </a-button>
                    </div>
                    <div>
                        <a-button type="primary" :size="size">
                            <template #icon>
                                <DownloadOutlined />
                            </template>
                            批量创建
                        </a-button>
                    </div>
                    <div>
                        <a-button type="primary" :size="size">
                            <template #icon>
                                <DownloadOutlined />
                            </template>
                            导出项目
                        </a-button>
                    </div>
                </div>
            </div>
            <div class="table-area">
                <data-table></data-table>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive, watch, computed } from 'vue';
import type { Dayjs } from 'dayjs';
import type { SizeType } from 'ant-design-vue/es/config-provider';
type RangeValue = [Dayjs, Dayjs];

const inputSearchValue = ref<string>('');
const entryTime = ref<[Dayjs, Dayjs]>();
const productYearRange = ref<RangeValue>();


const provinceData = ['Zhejiang', 'Jiangsu'] as const;
const cityData = {
    Zhejiang: ['Hangzhou', 'Ningbo', 'Wenzhou'],
    Jiangsu: ['Nanjing', 'Suzhou', 'Zhenjiang'],
};
const province = provinceData[0];
const state = reactive({
    province,
    provinceData,
    cityData,
    secondCity: cityData[province][0],
});
const cities = computed(() => {
    return cityData[state.province];
});

watch(
    () => state.province,
    val => {
        state.secondCity = state.cityData[val][0];
    },
);

const stageValue = ref('lucy');
const focus = () => {
    console.log('focus');
};

const handleChange = (value: string) => {
    console.log(`selected ${value}`);
};

const size = ref<SizeType>('large');
</script>
<style lang="less" scoped>
@import "index.less";
</style>